<template>
	<view class="AdministratorIndex">
		<view :style="{ paddingTop: `${getSystemInfo.statusBarTop}rpx`, height: `${getSystemInfo.statusBarHeight}rpx` }"
			class="logout-log f-background">
			<view class="tuichudenglu dis" @click="onTuichudenglu">
				<text class="iconfont icon-tuichudenglu size-32"></text>
			</view>
		</view>
		<view class="administrator por f-background margin-bottom-20">
			<view class="admin-img">
				<image class="width-height100" :src="infoData.headImg" v-if="infoData.headImg" mode=""></image>
				<image class="width-height100" src="@/static/icon/mo.png" mode="" v-else></image>
			</view>
			<view class="admin-info between">
				<view class="font-weight-600 color3 size-34">{{infoData.userName || ''}}</view>
				<view class="color9 size-28">{{infoData.mobilePhone || ''}}</view>
				<view class="color9 size-28">待处理：{{infoData.count || 0}}单</view>
			</view>
			<navigator class="communities dis poa" hover-class="none"
				url="/packageAdmin/all-communities/all-communities">
				<text class="color-f size-28">所有小区</text>
			</navigator>
		</view>
		<!-- 搜索部分 -->
		<u-sticky bgColor="#ffffff">
			<view class="search margin-bottom-20">
				<u-tabs lineWidth="76rpx" :activeStyle="activeRegimental" :inactiveStyle="inactiveRegimental"
					:list="tabsList" @click="onClickTabs"></u-tabs>
				<view class="section f5-background dis-cen">
					<view class="dis-ali">
						<text class="iconfont icon-sousuo"></text>
						<input @confirm="postPageList()" confirm-type="search" v-model="params.dataBean.text"
							class="input size-28" placeholder-class="color-8" type="text" placeholder="请输入身份名称、手机号" />
					</view>
					<picker :value="params.dataBean.applyStatus*1+1" :range="auditType" range-key="name" mode='selector'
						@change="onAuditType">
						<view class="untreated color3 size-28 dis">
							{{auditType[params.dataBean.applyStatus*1+1].name}}<text
								class="iconfont icon-down-1-copy size-24 font-weight-600"></text>
						</view>
					</picker>
				</view>
			</view>
		</u-sticky>
		<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
			@up="$event=> postPageList($event.num)" :toTop="{width: '100px',height: '100px'}" :down="{auto: false}"
			:up="{auto: true, textNoMore: '— 我也是有底线滴 —',empty:{use:false}}">
			<!-- 商品部分 -->
			<view class="infos" v-if="!loading && params.dataBean.type == 1 && list.length">
				<view class="infos-for f-background margin-bottom-20" v-for="(item,index) in list" :key="index">
					<Authentication :item="item" />
				</view>
			</view>
			<view class="errand-runner" v-if="!loading && params.dataBean.type == 2 && list.length">
				<view class="errand f-background margin-bottom-20" v-for="(item,index) in list" :key="index">
					<view class="dis-cen">
						<view class="dis-ali">
							<view class="width-dis size-28 color9">申请信息</view>
							<view class="size-28 color3">{{item.name || ''}}丨{{item.roleName || ''}} {{item.telPhone}}
							</view>
							<text class="iconfont "></text>
						</view>
						<text class="size-28"
							:style="{color: examine[item.status].color}">{{examine[item.status].name}}</text>
					</view>
					<view class="dis-ali">
						<view class="width-dis size-28 color9">提现类型</view>
						<view class="size-28 color3">{{item.withdrawType == 2 ? '账户余额提现' : '保证金提现' }}</view>
					</view>
					<view class="dis-ali">
						<view class="width-dis size-28 color9">提交时间</view>
						<view class="size-28 color3">{{item.createTime || 'xxxx-xx-xx 00:00:00'}}</view>
					</view>
					<view class="dis-ali">
						<view class="width-dis size-28 color9">提现金额</view>
						<view class="size-34 color font-weight-600">
							<text class="size-24">￥</text>{{(item.amount || 0).toFixed(2) || '0.00'}}
							<text class="font-weight-400 color9 size-24 margin-left-12">
								(手续费：￥{{(item.commission || 0).toFixed(2) || '0.00'}})
							</text>
						</view>
					</view>
					<view class="dis-ali" @click="cellShow=true,reviewInfo=item">
						<view class="width-dis size-28 color9">提现信息</view>
						<view class="size-28 color">点击查看<text class="margin-left-12 color3"></text></view>
					</view>
					<view class="dis-ali" v-if="item.status == 2">
						<view class="width-dis size-28 color9">拒绝原因</view>
						<view class="size-28 color">{{item.explains}}</view>
					</view>
					<view class="width100" v-if="item.status == 0">
						<AuditOperation :types="2" @agree="mescroll.resetUpScroll()" :auditId="item.id*1" />
					</view>
				</view>
			</view>
			<view class="default" v-else-if="!list.length && !loading">
				<Default tisName="暂无审核数据!" />
			</view>
		</mescroll-body>
		<!-- 小区信息 -->
		<u-popup :show="cellShow" :safeAreaInsetBottom="false" round="28rpx" mode="center" @close="cellShow=false">
			<view class="PopUpPrompt">
				<view class="title dis-cen border-bottom">
					<text class="font-weight-400 color3 size-32">提现信息</text>
					<text class="iconfont icon-guanbi color3 size-48" @click="cellShow = false"></text>
				</view>
				<view class="dis-cen">
					<view class="size-30 dis-ali">
						<view class="names font-weight-400 color9">银行卡号</view>
						<view class="font-weight-600 color3">{{reviewInfo.bankCarNum || ''}}</view>
					</view>
					<view class="size-24 color" @click="onCopy(reviewInfo.bankCarNum)">复制</view>
				</view>
				<view class="size-30 dis-ali">
					<view class="names font-weight-400 color9">银行名称</view>
					<view class="font-weight-600 color3">
						{{reviewInfo.bankName || ''}}
					</view>
				</view>
				<view class="size-30 dis-ali">
					<view class="names font-weight-400 color9">所属支行</view>
					<view class="font-weight-600 color3">
						{{reviewInfo.subbranchName || ''}}
					</view>
				</view>
				<view class="size-30 dis-ali">
					<view class="names font-weight-400 color9">开户地址</view>
					<view class="font-weight-600 color3">
						{{reviewInfo.areaName || ''}}
					</view>
				</view>
				<view class="size-30 flex">
					<view class="names font-weight-400 color9">服务小区</view>
					<view class="widths font-weight-600 color3">
						{{reviewInfo.communitys || ''}}
					</view>
				</view>
				<view class="size-30 dis-ali">
					<view class="names font-weight-400 color9">提现金额</view>
					<view class="size-34 color font-weight-600">
						<text class="size-24">￥</text>{{(reviewInfo.amount || 0).toFixed(2) || '0.00'}}
						<text class="font-weight-400 color9 size-24 margin-left-12">
							(手续费：￥{{(reviewInfo.commission || 0).toFixed(2) || '0.00'}})
						</text>
					</view>
				</view>
				<u-button type="primary"
					:customStyle="{width: '602rpx',height: '90rpx',borderRadius: '12rpx',marginTop: '18rpx'}"
					color="#EB0000" @click="cellShow=false">
					<text class="color-f font-weight-600 size-32">我知道了</text>
				</u-button>
			</view>
		</u-popup>
		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	import { getSystemInfo } from '@/utils/index';
	import { examine } from "@/utils/enumeration/index"
	import AuditOperation from "@/components/audit-operation/audit-operation"
	import Default from "@/components/default/default"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { PageList, GetApplyCount } from "@/api/index"
	import { activeRegimental, inactiveRegimental } from '@/utils/style/tabs';
	import Authentication from "@/components/authentication/authentication"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { Authentication, Default, AuditOperation },
		data() {
			return {
				getSystemInfo: getSystemInfo(), // 顶部自定义导航数据
				reviewInfo: {},
				cellShow: false,
				examine,
				// adminShow: false,
				activeRegimental,
				inactiveRegimental,
				tabsList: [
					{ name: '身份审核', },
					{ name: '提现审核', },
				],
				auditType: [
					{ name: '全部', type: -1 },
					{ name: '未处理', type: 0 },
					{ name: '已同意', type: 1 },
					{ name: '已拒绝', type: 2 }
				],
				loading: true,
				list: [],
				params: {
					size: 10, // 	每页显示条数
					current: 1, // 当前页
					dataBean: {
						applyType: -1,
						applyStatus: 0, // -1全部 0.申请中 1.通过 2.驳回
						type: 1, // 1=角色申请  2=提现申请
						text: '', // 检索内容
					}
				},
				infoData: {}
			}
		},
		onShow() {
			this.postGetApplyCount()
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页
			this.canReset && this.mescroll.scrollTo(0, 0) // 滚动条也重置到顶部
			this.canReset = true // 过滤第一次的onShow事件
			// this.postGetOrderList()
		},
		methods: {
			// 我的
			async postGetApplyCount() {
				const { code, data } = await GetApplyCount()
				const _this = this
				if (code == "200") {
					this.infoData = data
				}
			},
			// 列表数据
			async postPageList() {
				this.params.current = this.mescroll.num
				const { code, data } = await PageList(this.params)
				const _this = this
				if (code == "200") {
					this.list = this.mescroll.num == 1 ? data.records : this.list.concat(data.records); //追加新数据
					setTimeout(() => {
						_this.loading = false
						_this.mescroll.endByPage(data.records.length, data.total); //必传参数(当前页的数据个数, 总页数)
					}, 500)
				}
			},
			// 退出登录
			onTuichudenglu(){
				uni.showModal({
					content: '确认退出登录吗？',
					confirmColor: "#FF0000",
					success: function (res) {
						if (res.confirm) {
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							uni.reLaunch({
								url: '/packagePerson/logon/logon'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onAuditType(e) {
				const { value } = e.detail
				console.log('e', e.detail.value)
				this.params.dataBean.applyStatus = value * 1 - 1
				this.mescroll.resetUpScroll() // 重置列表数据为第一页
				this.mescroll.scrollTo(0, 0) // 滚动条也重置到顶部
			},
			// 复制
			onCopy(name) {
				uni.setClipboardData({
					data: name + "",
					success: function() {
						console.log('success');
						uni.$u.toast('复制成功')
					}
				})
			},
			onClickTabs(e) {
				console.log(e)
				this.params.dataBean.type = e.index * 1 + 1
				this.mescroll.resetUpScroll() // 重置列表数据为第一页
				this.mescroll.scrollTo(0, 0) // 滚动条也重置到顶部
			}
		}
	}
</script>

<style lang="scss">
	.AdministratorIndex {

		// 退出登录
		.logout-log {
			padding-left: 30rpx;
			box-sizing: border-box;
			.tuichudenglu{
				width: 60rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 100rpx;
				border: 2rpx solid rgba(153,153,153,0.3);
			}
			.icon-tuichudenglu{
				transform: scaleX(-1);  
			}
		}

		// 所有小区
		.communities {
			width: 172rpx;
			height: 64rpx;
			background: linear-gradient(180deg, #FF5F5F 0%, #EB0000 100%);
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255, 109, 109, 0.22);
			border-radius: 100rpx;
			right: 24rpx;
			top: 2rpx;
		}

		// 申请信息
		.errand-runner {
			.errand {
				padding: 40rpx 24rpx 24rpx;
				display: grid;
				grid-gap: 36rpx;
			}

			.width-dis {
				width: 132rpx;
			}
		}

		// 个人信息
		.administrator {
			display: grid;
			grid-template-columns: 132rpx 1fr;
			grid-gap: 24rpx;
			padding: 16rpx 24rpx 32rpx 40rpx;

			.admin-img {
				width: 132rpx;
				height: 132rpx;
				border-radius: 100rpx;
			}
		}

		// 导航
		.u-tabs__wrapper__nav__item {
			width: 50%;
			padding: 0 !important;
		}

		.u-tabs__wrapper__nav__item {
			height: 88rpx !important;
		}

		.u-tabs__wrapper__nav__line {
			height: 8rpx !important;
			border-radius: 100rpx !important;
			background: #EB0000 !important;
			bottom: 0 !important;
		}

		// 搜索
		.search {
			padding-bottom: 20rpx;

			.input {
				height: 72rpx;
				width: 460rpx;
			}

			.section {
				border-radius: 100rpx;
				margin: 30rpx 20rpx 0;
			}

			.untreated {
				width: 152rpx;
				height: 72rpx;

				.icon-down-1-copy {
					margin-left: 8rpx;
				}
			}

			.icon-sousuo {
				margin: 0 12rpx 0 24rpx;
				color: #A5A5A5;
			}
		}
	}
</style>